<template>
  <div>
    <div class="demo-query-builder--controler">
      <label v-for="key in Object.keys(optionOrder)" :key="key">
        <input
          type="checkbox"
          :checked="optionOrder[key]"
          @change="
            (e) =>
              updateOptions({
                action: 'update',
                payload: {
                  optionName: key,
                  value: e.target.checked
                }
              })
          "
        />
        <span>{{ key }}</span>
      </label>
      <!-- <p>{{ optionOrder }}</p> -->
      <div style="border-top: 1px solid #eee; padding-top: 10px">
        <span v-for="(item, key) in actions" :key="key">
          <tiny-button type="primary" plain @click="updateOptions({ action: item.action })">{{
            item.text
          }}</tiny-button>
        </span>
      </div>
      <!-- <p>{{ query }}</p> -->
    </div>

    <tiny-query-builder
      ref="queryBuilder"
      :config="config"
      :query="query"
      :on-query-change="getFormateData"
    ></tiny-query-builder>

    <div v-for="(item, key) in formatData" :key="key" class="formatBox">
      <code>{{ item[0] }}</code>
      <br />
      <pre>{{ item[1] }}</pre>
    </div>
  </div>
</template>

<script>
import { TinyQueryBuilder, TinyButton } from '@opentiny/vue'
import { random } from '@opentiny/utils'

export default {
  components: {
    TinyQueryBuilder,
    TinyButton
  },
  data() {
    return {
      formatData: '',
      config,
      value: '',
      optionOrder: { ...defaultOptions },
      query: this.getInitialQuery(),
      actions: [
        {
          text: '默认配置',
          action: 'reset'
        },
        {
          text: '所有配置',
          action: 'all'
        },
        {
          text: '清空查询',
          action: 'clearQuery'
        },
        {
          text: '默认查询',
          action: 'resetQuery'
        }
      ]
    }
  },
  methods: {
    getFormateData() {
      this.formatData = formatMap.map(([format]) => {
        const formatQueryOptions = {
          format,
          fields: this.optionOrder.validateQuery ? this.config.fields : undefined,
          parseNumbers: this.optionOrder.parseNumbers
        }

        return [format, this.$refs.queryBuilder?.getFormatQuery(this.query, formatQueryOptions)]
      })
    },
    updateOptions({ action, payload }) {
      if (action === 'reset') {
        this.optionOrder = { ...defaultOptions }
        this.updateConfig()
      } else if (action === 'all') {
        const allSelected = { ...defaultOptions }
        for (const opt of Object.keys(this.optionOrder)) {
          allSelected[opt] = ![
            'disabled',
            'independentCombinators',
            // 'showBranches',
            'showCombinatorsBetweenRules',
            'displayOnlyField',
            'showNotToggle'
          ].includes(opt)
        }
        this.optionOrder = allSelected
        this.updateConfig()
      } else if (action === 'update') {
        const { optionName, value } = payload
        this.optionOrder = { ...this.optionOrder, [optionName]: value }
        this.updateConfig()
      } else if (action === 'replace') {
        this.query = action.payload
      } else if (action === 'clearQuery') {
        this.query = {
          combinator: 'and',
          rules: [
            {
              id: generateID(),
              field: '',
              value: '',
              operator: ''
            }
          ]
        }
      } else if (action === 'resetQuery') {
        this.query = this.getInitialQuery()
      }
    },
    updateConfig() {
      this.config = { ...this.config, ...this.optionOrder }
    },
    getInitialQuery() {
      const initialQuery = {
        id: generateID(),
        combinator: 'and',
        not: false,
        rules: [
          {
            id: generateID(),
            field: 'firstName',
            value: 'Stev',
            operator: 'beginsWith'
          },
          {
            id: generateID(),
            field: 'user.lastName',
            value: 'Vai, Vaughan',
            operator: 'in'
          },
          {
            id: generateID(),
            field: 'age',
            operator: '>',
            value: '28'
          },
          {
            id: generateID(),
            combinator: 'or',
            rules: [
              {
                id: generateID(),
                field: 'isMusician',
                operator: '=',
                value: true
              },
              {
                id: generateID(),
                field: 'instrument',
                operator: '=',
                value: 'Guitar'
              }
            ]
          },
          {
            id: generateID(),
            field: 'groupedField1',
            operator: '=',
            value: 'groupedField4',
            valueSource: 'field'
          },
          {
            id: generateID(),
            field: 'birthdate',
            operator: 'between',
            value: '1954-10-03,1960-06-06'
          }
        ]
      }

      return initialQuery
    }
  }
}

const generateID = () =>
  '00-0-4-2-000'.replace(/[^-]/g, (s) => (((random() + ~~s) * 0x10000) >> s).toString(16).padStart(4, '0'))

const operators = [
  { name: '=', label: '等于' },
  { name: '!=', label: '不等于' },
  { name: '<', label: '小于' },
  { name: '>', label: '大于' },
  { name: '<=', label: '小于等于' },
  { name: '>=', label: '大于等于' },
  { name: 'contains', label: '包含' },
  { name: 'beginsWith', label: '开头为' },
  { name: 'endsWith', label: '结束为' },
  { name: 'doesNotContain', label: '不包含' },
  { name: 'null', label: '为空' },
  { name: 'notNull', label: '不为空' },
  { name: 'between', label: '介于' },
  // { name: 'notBetween', label: 'not between' },
  // { name: 'doesNotBeginWith', label: 'does not begin with' },
  // { name: 'doesNotEndWith', label: 'does not end with' },
  { name: 'in', label: 'in' },
  { name: 'notIn', label: 'not in' }
]

const defaultOptions = {
  autoSelectField: true,
  autoSelectOperator: true,
  parseNumbers: false,
  showCloneButtons: false,
  showLockButtons: false,
  showCombinatorsBetweenRules: false,
  showNotToggle: false,
  disabled: false,
  displayOnlyField: false
  // addRuleToNewGroups: true,
  // debugMode: false,
  // enableDragAndDrop: false,
  // independentCombinators: false,
  // listsAsArrays: false,
  // resetOnFieldChange: true,
  // resetOnOperatorChange: false,
  // showBranches: true,
  // validateQuery: false
}

const config = {
  operators,
  ...defaultOptions,
  combinators: [
    {
      name: 'and',
      label: '且'
    },
    {
      name: 'or',
      label: '或'
    }
  ],
  fields: [
    {
      name: 'user',
      label: 'User',
      placeholder: '请输入',
      children: [
        {
          name: 'firstName',
          label: 'First Name',
          placeholder: '请输入',
          validator: (r) => !!r.value
        },
        {
          name: 'user.lastName',
          label: 'Last Name',
          placeholder: 'Enter last name',
          defaultOperator: 'beginsWith',
          validator: (r) => !!r.value
        }
      ]
    },
    {
      name: 'lastName2',
      label: 'Last Name2',
      placeholder: 'Enter last name',
      defaultOperator: 'beginsWith',
      validator: (r) => !!r.value
    },
    {
      name: 'age',
      label: 'Age',
      inputType: 'number',
      validator: (r) => !!r.value
    },
    {
      name: 'isMusician',
      label: 'Is a musician',
      valueEditorType: 'checkbox',
      operators: [
        {
          name: '=',
          label: '='
        }
      ],
      defaultValue: false,
      validator: (r) => !!r.value
    },
    {
      name: 'instrument',
      label: 'Primary instrument',
      valueEditorType: 'select',
      values: [
        {
          label: 'Percussion instruments',
          options: [
            {
              name: 'Clapstick',
              label: 'Clapstick'
            },
            {
              name: 'Cowbell',
              label: 'Cowbell'
            },
            {
              name: 'Cymbal',
              label: 'Cymbal'
            },
            {
              name: 'Gong',
              label: 'Gong'
            },
            {
              name: 'Maraca',
              label: 'Maraca'
            },
            {
              name: 'Marimba',
              label: 'Marimba'
            },
            {
              name: 'More cowbell',
              label: 'More cowbell'
            },
            {
              name: 'Spoon',
              label: 'Spoon'
            },
            {
              name: 'Steelpan',
              label: 'Steelpan'
            },
            {
              name: 'Tambourine',
              label: 'Tambourine'
            },
            {
              name: 'Triangle',
              label: 'Triangle'
            },
            {
              name: 'Vibraphone',
              label: 'Vibraphone'
            },
            {
              name: 'Washboard',
              label: 'Washboard'
            },
            {
              name: 'Wood block',
              label: 'Wood block'
            },
            {
              name: 'Wooden fish',
              label: 'Wooden fish'
            },
            {
              name: 'Xylophone',
              label: 'Xylophone'
            }
          ]
        },
        {
          label: 'Membranophones',
          options: [
            {
              name: 'Barrel drum',
              label: 'Barrel drum'
            },
            {
              name: 'Bass drum',
              label: 'Bass drum'
            },
            {
              name: 'Bongo drums',
              label: 'Bongo drums'
            },
            {
              name: 'Conga',
              label: 'Conga'
            },
            {
              name: 'Drum',
              label: 'Drum'
            },
            {
              name: 'Drum kit',
              label: 'Drum kit'
            },
            {
              name: "Jew's harp",
              label: "Jew's harp"
            },
            {
              name: 'Octaban',
              label: 'Octaban'
            },
            {
              name: 'Samphor',
              label: 'Samphor'
            },
            {
              name: 'Snare drum',
              label: 'Snare drum'
            },
            {
              name: 'Timpani',
              label: 'Timpani'
            },
            {
              name: 'Tom-tom',
              label: 'Tom-tom'
            }
          ]
        },
        {
          label: 'Wind instruments',
          options: [
            {
              name: 'Accordion',
              label: 'Accordion'
            },
            {
              name: 'Air horn',
              label: 'Air horn'
            },
            {
              name: 'Bagpipe',
              label: 'Bagpipe'
            },
            {
              name: 'Baritone horn',
              label: 'Baritone horn'
            },
            {
              name: 'Bassoon',
              label: 'Bassoon'
            },
            {
              name: 'Bazooka',
              label: 'Bazooka'
            },
            {
              name: 'Beatboxing',
              label: 'Beatboxing'
            },
            {
              name: 'Blown bottle',
              label: 'Blown bottle'
            },
            {
              name: 'Bugle',
              label: 'Bugle'
            },
            {
              name: 'Clarinet',
              label: 'Clarinet'
            },
            {
              name: 'Conch',
              label: 'Conch'
            },
            {
              name: 'Cornet',
              label: 'Cornet'
            },
            {
              name: 'Didgeridoo',
              label: 'Didgeridoo'
            },
            {
              name: 'Double bell euphonium',
              label: 'Double bell euphonium'
            },
            {
              name: 'Doulophone',
              label: 'Doulophone'
            },
            {
              name: 'English horn',
              label: 'English horn'
            },
            {
              name: 'Euphonium',
              label: 'Euphonium'
            },
            {
              name: 'Flugelhorn',
              label: 'Flugelhorn'
            },
            {
              name: 'Flute',
              label: 'Flute'
            },
            {
              name: 'French horn',
              label: 'French horn'
            },
            {
              name: 'Harmonica',
              label: 'Harmonica'
            },
            {
              name: 'Irish flute',
              label: 'Irish flute'
            },
            {
              name: 'Jug',
              label: 'Jug'
            },
            {
              name: 'Kazoo',
              label: 'Kazoo'
            },
            {
              name: 'Melodeon',
              label: 'Melodeon'
            },
            {
              name: 'Mezzo-soprano',
              label: 'Mezzo-soprano'
            },
            {
              name: 'Oboe',
              label: 'Oboe'
            },
            {
              name: 'Ocarina',
              label: 'Ocarina'
            },
            {
              name: 'Pan flute',
              label: 'Pan flute'
            },
            {
              name: 'Piccolo',
              label: 'Piccolo'
            },
            {
              name: 'Pipe organ',
              label: 'Pipe organ'
            },
            {
              name: 'Recorder',
              label: 'Recorder'
            },
            {
              name: 'Saxophone',
              label: 'Saxophone'
            },
            {
              name: 'Slide whistle',
              label: 'Slide whistle'
            },
            {
              name: 'Sousaphone',
              label: 'Sousaphone'
            },
            {
              name: 'Trombone',
              label: 'Trombone'
            },
            {
              name: 'Trumpet',
              label: 'Trumpet'
            },
            {
              name: 'Tuba',
              label: 'Tuba'
            },
            {
              name: 'Whistle',
              label: 'Whistle'
            }
          ]
        },
        {
          label: 'Stringed instruments',
          options: [
            {
              name: 'Aeolian harp',
              label: 'Aeolian harp'
            },
            {
              name: 'Bandolin',
              label: 'Bandolin'
            },
            {
              name: 'Banjo ukulele',
              label: 'Banjo ukulele'
            },
            {
              name: 'Cello',
              label: 'Cello'
            },
            {
              name: 'Chapman stick',
              label: 'Chapman stick'
            },
            {
              name: 'Clavichord',
              label: 'Clavichord'
            },
            {
              name: 'Clavinet',
              label: 'Clavinet'
            },
            {
              name: 'Double bass',
              label: 'Double bass'
            },
            {
              name: 'Dulcimer',
              label: 'Dulcimer'
            },
            {
              name: 'Fiddle',
              label: 'Fiddle'
            },
            {
              name: 'Guitar',
              label: 'Guitar'
            },
            {
              name: 'Hammered dulcimer',
              label: 'Hammered dulcimer'
            },
            {
              name: 'Harp',
              label: 'Harp'
            },
            {
              name: 'Harpsichord',
              label: 'Harpsichord'
            },
            {
              name: 'Lute',
              label: 'Lute'
            },
            {
              name: 'Lyre',
              label: 'Lyre'
            },
            {
              name: 'Maguhu',
              label: 'Maguhu'
            },
            {
              name: 'Mandola',
              label: 'Mandola'
            },
            {
              name: 'Mandolin',
              label: 'Mandolin'
            },
            {
              name: 'Octobass',
              label: 'Octobass'
            },
            {
              name: 'Piano',
              label: 'Piano'
            },
            {
              name: 'Sitar',
              label: 'Sitar'
            },
            {
              name: 'Ukulele',
              label: 'Ukulele'
            },
            {
              name: 'Viol',
              label: 'Viol'
            },
            {
              name: 'Violin',
              label: 'Violin'
            },
            {
              name: 'Washtub bass',
              label: 'Washtub bass'
            }
          ]
        },
        {
          label: 'Electronic instruments',
          options: [
            {
              name: 'AlphaSphere',
              label: 'AlphaSphere'
            },
            {
              name: 'Audiocubes',
              label: 'Audiocubes'
            },
            {
              name: 'Bass pedals',
              label: 'Bass pedals'
            },
            {
              name: 'Continuum Fingerboard',
              label: 'Continuum Fingerboard'
            },
            {
              name: 'Croix Sonore',
              label: 'Croix Sonore'
            },
            {
              name: "Denis d'or",
              label: "Denis d'or"
            },
            {
              name: 'Dubreq stylophone',
              label: 'Dubreq stylophone'
            },
            {
              name: 'Drum machine',
              label: 'Drum machine'
            },
            {
              name: 'Eigenharp',
              label: 'Eigenharp'
            },
            {
              name: 'Electric guitar',
              label: 'Electric guitar'
            },
            {
              name: 'Electronic keyboard',
              label: 'Electronic keyboard'
            },
            {
              name: 'Electronic organ',
              label: 'Electronic organ'
            },
            {
              name: 'EWI',
              label: 'EWI'
            },
            {
              name: 'Fingerboard synthesizer',
              label: 'Fingerboard synthesizer'
            },
            {
              name: 'Hammond organ',
              label: 'Hammond organ'
            },
            {
              name: 'Keyboard',
              label: 'Keyboard'
            },
            {
              name: 'Keytar',
              label: 'Keytar'
            },
            {
              name: 'Kraakdoos',
              label: 'Kraakdoos'
            },
            {
              name: 'Laser harp',
              label: 'Laser harp'
            },
            {
              name: 'Mellotron',
              label: 'Mellotron'
            },
            {
              name: 'MIDI keyboard',
              label: 'MIDI keyboard'
            },
            {
              name: 'Omnichord',
              label: 'Omnichord'
            },
            {
              name: 'Ondes Martenot',
              label: 'Ondes Martenot'
            },
            {
              name: 'Otamatone',
              label: 'Otamatone'
            },
            {
              name: 'Sampler',
              label: 'Sampler'
            },
            {
              name: 'Seaboard music instrument',
              label: 'Seaboard music instrument'
            },
            {
              name: 'Skoog',
              label: 'Skoog'
            },
            {
              name: 'Synclavier',
              label: 'Synclavier'
            },
            {
              name: 'Synthesizer',
              label: 'Synthesizer'
            },
            {
              name: 'Teleharmonium',
              label: 'Teleharmonium'
            },
            {
              name: 'Tenori-on',
              label: 'Tenori-on'
            },
            {
              name: 'Theremin',
              label: 'Theremin'
            },
            {
              name: 'trautonium',
              label: 'trautonium'
            },
            {
              name: 'Turntablism',
              label: 'Turntablism'
            },
            {
              name: 'Turntable',
              label: 'Turntable'
            }
          ]
        }
      ],
      defaultValue: 'Cowbell',
      operators: [
        {
          name: '=',
          label: '='
        },
        {
          name: 'in',
          label: 'in'
        }
      ]
    },
    {
      name: 'alsoPlays',
      label: 'Also plays',
      valueEditorType: 'multiselect',
      values: [
        {
          label: 'Percussion instruments',
          options: [
            {
              name: 'Clapstick',
              label: 'Clapstick'
            },
            {
              name: 'Cowbell',
              label: 'Cowbell'
            },
            {
              name: 'Cymbal',
              label: 'Cymbal'
            },
            {
              name: 'Gong',
              label: 'Gong'
            },
            {
              name: 'Maraca',
              label: 'Maraca'
            },
            {
              name: 'Marimba',
              label: 'Marimba'
            },
            {
              name: 'More cowbell',
              label: 'More cowbell'
            },
            {
              name: 'Spoon',
              label: 'Spoon'
            },
            {
              name: 'Steelpan',
              label: 'Steelpan'
            },
            {
              name: 'Tambourine',
              label: 'Tambourine'
            },
            {
              name: 'Triangle',
              label: 'Triangle'
            },
            {
              name: 'Vibraphone',
              label: 'Vibraphone'
            },
            {
              name: 'Washboard',
              label: 'Washboard'
            },
            {
              name: 'Wood block',
              label: 'Wood block'
            },
            {
              name: 'Wooden fish',
              label: 'Wooden fish'
            },
            {
              name: 'Xylophone',
              label: 'Xylophone'
            }
          ]
        },
        {
          label: 'Membranophones',
          options: [
            {
              name: 'Barrel drum',
              label: 'Barrel drum'
            },
            {
              name: 'Bass drum',
              label: 'Bass drum'
            },
            {
              name: 'Bongo drums',
              label: 'Bongo drums'
            },
            {
              name: 'Conga',
              label: 'Conga'
            },
            {
              name: 'Drum',
              label: 'Drum'
            },
            {
              name: 'Drum kit',
              label: 'Drum kit'
            },
            {
              name: "Jew's harp",
              label: "Jew's harp"
            },
            {
              name: 'Octaban',
              label: 'Octaban'
            },
            {
              name: 'Samphor',
              label: 'Samphor'
            },
            {
              name: 'Snare drum',
              label: 'Snare drum'
            },
            {
              name: 'Timpani',
              label: 'Timpani'
            },
            {
              name: 'Tom-tom',
              label: 'Tom-tom'
            }
          ]
        },
        {
          label: 'Wind instruments',
          options: [
            {
              name: 'Accordion',
              label: 'Accordion'
            },
            {
              name: 'Air horn',
              label: 'Air horn'
            },
            {
              name: 'Bagpipe',
              label: 'Bagpipe'
            },
            {
              name: 'Baritone horn',
              label: 'Baritone horn'
            },
            {
              name: 'Bassoon',
              label: 'Bassoon'
            },
            {
              name: 'Bazooka',
              label: 'Bazooka'
            },
            {
              name: 'Beatboxing',
              label: 'Beatboxing'
            },
            {
              name: 'Blown bottle',
              label: 'Blown bottle'
            },
            {
              name: 'Bugle',
              label: 'Bugle'
            },
            {
              name: 'Clarinet',
              label: 'Clarinet'
            },
            {
              name: 'Conch',
              label: 'Conch'
            },
            {
              name: 'Cornet',
              label: 'Cornet'
            },
            {
              name: 'Didgeridoo',
              label: 'Didgeridoo'
            },
            {
              name: 'Double bell euphonium',
              label: 'Double bell euphonium'
            },
            {
              name: 'Doulophone',
              label: 'Doulophone'
            },
            {
              name: 'English horn',
              label: 'English horn'
            },
            {
              name: 'Euphonium',
              label: 'Euphonium'
            },
            {
              name: 'Flugelhorn',
              label: 'Flugelhorn'
            },
            {
              name: 'Flute',
              label: 'Flute'
            },
            {
              name: 'French horn',
              label: 'French horn'
            },
            {
              name: 'Harmonica',
              label: 'Harmonica'
            },
            {
              name: 'Irish flute',
              label: 'Irish flute'
            },
            {
              name: 'Jug',
              label: 'Jug'
            },
            {
              name: 'Kazoo',
              label: 'Kazoo'
            },
            {
              name: 'Melodeon',
              label: 'Melodeon'
            },
            {
              name: 'Mezzo-soprano',
              label: 'Mezzo-soprano'
            },
            {
              name: 'Oboe',
              label: 'Oboe'
            },
            {
              name: 'Ocarina',
              label: 'Ocarina'
            },
            {
              name: 'Pan flute',
              label: 'Pan flute'
            },
            {
              name: 'Piccolo',
              label: 'Piccolo'
            },
            {
              name: 'Pipe organ',
              label: 'Pipe organ'
            },
            {
              name: 'Recorder',
              label: 'Recorder'
            },
            {
              name: 'Saxophone',
              label: 'Saxophone'
            },
            {
              name: 'Slide whistle',
              label: 'Slide whistle'
            },
            {
              name: 'Sousaphone',
              label: 'Sousaphone'
            },
            {
              name: 'Trombone',
              label: 'Trombone'
            },
            {
              name: 'Trumpet',
              label: 'Trumpet'
            },
            {
              name: 'Tuba',
              label: 'Tuba'
            },
            {
              name: 'Whistle',
              label: 'Whistle'
            }
          ]
        },
        {
          label: 'Stringed instruments',
          options: [
            {
              name: 'Aeolian harp',
              label: 'Aeolian harp'
            },
            {
              name: 'Bandolin',
              label: 'Bandolin'
            },
            {
              name: 'Banjo ukulele',
              label: 'Banjo ukulele'
            },
            {
              name: 'Cello',
              label: 'Cello'
            },
            {
              name: 'Chapman stick',
              label: 'Chapman stick'
            },
            {
              name: 'Clavichord',
              label: 'Clavichord'
            },
            {
              name: 'Clavinet',
              label: 'Clavinet'
            },
            {
              name: 'Double bass',
              label: 'Double bass'
            },
            {
              name: 'Dulcimer',
              label: 'Dulcimer'
            },
            {
              name: 'Fiddle',
              label: 'Fiddle'
            },
            {
              name: 'Guitar',
              label: 'Guitar'
            },
            {
              name: 'Hammered dulcimer',
              label: 'Hammered dulcimer'
            },
            {
              name: 'Harp',
              label: 'Harp'
            },
            {
              name: 'Harpsichord',
              label: 'Harpsichord'
            },
            {
              name: 'Lute',
              label: 'Lute'
            },
            {
              name: 'Lyre',
              label: 'Lyre'
            },
            {
              name: 'Maguhu',
              label: 'Maguhu'
            },
            {
              name: 'Mandola',
              label: 'Mandola'
            },
            {
              name: 'Mandolin',
              label: 'Mandolin'
            },
            {
              name: 'Octobass',
              label: 'Octobass'
            },
            {
              name: 'Piano',
              label: 'Piano'
            },
            {
              name: 'Sitar',
              label: 'Sitar'
            },
            {
              name: 'Ukulele',
              label: 'Ukulele'
            },
            {
              name: 'Viol',
              label: 'Viol'
            },
            {
              name: 'Violin',
              label: 'Violin'
            },
            {
              name: 'Washtub bass',
              label: 'Washtub bass'
            }
          ]
        },
        {
          label: 'Electronic instruments',
          options: [
            {
              name: 'AlphaSphere',
              label: 'AlphaSphere'
            },
            {
              name: 'Audiocubes',
              label: 'Audiocubes'
            },
            {
              name: 'Bass pedals',
              label: 'Bass pedals'
            },
            {
              name: 'Continuum Fingerboard',
              label: 'Continuum Fingerboard'
            },
            {
              name: 'Croix Sonore',
              label: 'Croix Sonore'
            },
            {
              name: "Denis d'or",
              label: "Denis d'or"
            },
            {
              name: 'Dubreq stylophone',
              label: 'Dubreq stylophone'
            },
            {
              name: 'Drum machine',
              label: 'Drum machine'
            },
            {
              name: 'Eigenharp',
              label: 'Eigenharp'
            },
            {
              name: 'Electric guitar',
              label: 'Electric guitar'
            },
            {
              name: 'Electronic keyboard',
              label: 'Electronic keyboard'
            },
            {
              name: 'Electronic organ',
              label: 'Electronic organ'
            },
            {
              name: 'EWI',
              label: 'EWI'
            },
            {
              name: 'Fingerboard synthesizer',
              label: 'Fingerboard synthesizer'
            },
            {
              name: 'Hammond organ',
              label: 'Hammond organ'
            },
            {
              name: 'Keyboard',
              label: 'Keyboard'
            },
            {
              name: 'Keytar',
              label: 'Keytar'
            },
            {
              name: 'Kraakdoos',
              label: 'Kraakdoos'
            },
            {
              name: 'Laser harp',
              label: 'Laser harp'
            },
            {
              name: 'Mellotron',
              label: 'Mellotron'
            },
            {
              name: 'MIDI keyboard',
              label: 'MIDI keyboard'
            },
            {
              name: 'Omnichord',
              label: 'Omnichord'
            },
            {
              name: 'Ondes Martenot',
              label: 'Ondes Martenot'
            },
            {
              name: 'Otamatone',
              label: 'Otamatone'
            },
            {
              name: 'Sampler',
              label: 'Sampler'
            },
            {
              name: 'Seaboard music instrument',
              label: 'Seaboard music instrument'
            },
            {
              name: 'Skoog',
              label: 'Skoog'
            },
            {
              name: 'Synclavier',
              label: 'Synclavier'
            },
            {
              name: 'Synthesizer',
              label: 'Synthesizer'
            },
            {
              name: 'Teleharmonium',
              label: 'Teleharmonium'
            },
            {
              name: 'Tenori-on',
              label: 'Tenori-on'
            },
            {
              name: 'Theremin',
              label: 'Theremin'
            },
            {
              name: 'trautonium',
              label: 'trautonium'
            },
            {
              name: 'Turntablism',
              label: 'Turntablism'
            },
            {
              name: 'Turntable',
              label: 'Turntable'
            }
          ]
        }
      ],
      defaultValue: 'More cowbell',
      operators: [
        {
          name: 'in',
          label: 'in'
        }
      ]
    },
    {
      name: 'gender',
      label: 'Gender',
      operators: [
        {
          name: '=',
          label: '='
        }
      ],
      valueEditorType: 'radio',
      values: [
        {
          name: 'M',
          label: 'Male'
        },
        {
          name: 'F',
          label: 'Female'
        },
        {
          name: 'O',
          label: 'Other'
        }
      ]
    },
    {
      name: 'height',
      label: 'Height'
    },
    {
      name: 'job',
      label: 'Job'
    },
    {
      name: 'description',
      label: 'Description',
      valueEditorType: 'textarea'
    },
    {
      name: 'birthdate',
      label: 'Birth Date',
      inputType: 'date'
    },
    {
      name: 'datetime',
      label: 'Show Time',
      inputType: 'datetime-local'
    },
    {
      name: 'alarm',
      label: 'Daily Alarm',
      inputType: 'time'
    },
    {
      name: 'groupedField1',
      label: 'Grouped Field 1',
      comparator: 'groupNumber',
      groupNumber: 'group1',
      valueSources: ['field', 'value']
    },
    {
      name: 'groupedField2',
      label: 'Grouped Field 2',
      comparator: 'groupNumber',
      groupNumber: 'group1',
      valueSources: ['field', 'value']
    },
    {
      name: 'groupedField3',
      label: 'Grouped Field 3',
      comparator: 'groupNumber',
      groupNumber: 'group1',
      valueSources: ['field', 'value']
    },
    {
      name: 'groupedField4',
      label: 'Grouped Field 4',
      comparator: 'groupNumber',
      groupNumber: 'group1',
      valueSources: ['field', 'value']
    }
  ]
}

const formatMap = [
  ['json_without_ids', 'JSON (no identifiers)'],
  ['json', 'JSON']
]
</script>

<style scoped>
.demo-query-builder--controler {
  padding: 10px;
  border: 1px solid #eee;
  margin-bottom: 20px;
}

.demo-query-builder--controler label {
  padding: 2px 10px;
  font-size: 14px;
  display: inline-block;
  min-width: 30%;
}

.demo-query-builder--controler span {
  padding: 5px 10px;
  display: inline-block;
  min-width: 20%;
}

.formatBox {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100%;
  margin: 15px 5px;
}

code {
  font-size: 14px;
  line-height: 14px;
  text-align: center;
  width: 100%;
  padding: 5px;
}

pre {
  border: 1px solid gray;
  width: 100%;
  height: 100%;
  margin: 0 auto;
  background-color: #ffffff;
  white-space: pre-wrap;
}
</style>
